<template>
  <div class="app-container">
    <git-navigation />
    <el-col :span="22" :offset="1">
      <el-row v-if="isOwner" :gutter="10">
        <h4>项目成员</h4>
        <span class="subtitle">添加新用户到 <strong>vue-template</strong> 或将他共享到其它群组。</span>
        <el-tabs v-model="activeName" type="border-card" :stretch="true" @tab-click="GetGroup">
          <el-tab-pane label="添加成员" name="user">
            <el-form ref="memberForm" :model="memberForm" label-position="top" label-width="80px">
              <el-form-item label="选择要邀请的成员">
                <el-col :span="24">
                  <el-select
                    v-model="memberForm.member"
                    multiple
                    filterable
                    remote
                    placeholder="搜索要更新或邀请的成员"
                    :remote-method="filterMember"
                    :loading="filterLoading"
                    style="width: 100%"
                  >
                    <!--              todo-->
                    <el-option
                      v-for="item in memberFilterOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                      <el-row style="height:50px;">
                        <el-col :span="1">
                          <img class="member-avatar" :src="item.avatar_url" alt="">
                        </el-col>
                        <el-col :span="1" style="margin-left:15px;">
                          <el-row style="height:25px">
                            {{ item.name }}
                          </el-row>
                          <el-row>
                            {{ item.username }}
                          </el-row>
                        </el-col>
                      </el-row>
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="选择角色权限">
                <el-col :span="24">
                  <el-select v-model="memberForm.role" style="width: 100%;">
                    <el-option
                      v-for="item in roleOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="访问到期日期">
                <el-col>
                  <el-date-picker
                    v-model="memberForm.deadline"
                    style="width: 100%"
                    type="date"
                    placeholder="到期日期"
                  />
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  :disabled="this.memberForm.member.length === 0"
                  @click="AddToProjectGroup"
                >添加到项目
                </el-button>
                <el-button @click="dialogImportVisable=true">导入</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="与群组共享" name="group">
            <el-form ref="groupForm" label-position="top" :model="groupForm" label-width="80px">
              <el-form-item label="选择要共享的群组">
                <el-select
                  v-model="groupForm.groupId"
                  placeholder=""
                  style="width: 100%;"
                >
                  <el-option
                    v-for="item in groupOptions"
                    :key="item.id"
                    :label="item.full_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="最高访问级别">
                <el-select v-model="groupForm.role" style="width: 100%;">
                  <el-option
                    v-for="item in roleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="访问到期日期">
                <el-col>
                  <el-date-picker
                    v-model="groupForm.deadline"
                    style="width: 100%"
                    type="date"
                    placeholder="到期日期"
                    value-format="yyyy-MM-dd"
                  />
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="success" :disabled="!this.groupForm.groupId" @click="shareWithGroup">共享</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <h4>现有用户和群组</h4>
      <template>
        <el-row class="groupp-header">
          <el-col class="name-header" :span="6">可以访问<strong>{{ this.$route.params.projectName }}</strong> 的群组
            <el-badge :value="shareGroupNum" type="primary" />
          </el-col>
          <el-col>
            <el-table
              v-loading="listLoading"
              :data="groupList"
              :show-header="false"
              highlight-current-row
            >
              <el-table-column>
                <template slot-scope="{ row }">
                  <el-row :gutter="10">
                    <el-col :span="3">
                      <el-button type="success" circle>D</el-button>
                    </el-col>
                    <!--                    <el-col :span="3"><img class="avatar" :src="" alt=""></el-col>-->
                    <el-col :span="9" style="padding-top:2px;">
                      <el-row :gutter="10"><strong>{{ row.group_name }}</strong></el-row>
                      <!--                      <el-row :gutter="10">加入时间 · </el-row>-->
                      <!--                      <el-row :gutter="10">-->
                      <!--                        {{ row.username }}-->
                      <!--                      </el-row>-->
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <!--todo  当前用户不可删除和设置截止日期-->
                <template slot-scope="{ row, $index }">
                  <el-select
                    v-model="row.group_access_level"
                    disabled
                    style="margin-top:15px;"
                    @change="editMember(row)"
                  >
                    <el-option
                      v-for="item in groupRoleOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <!--                  <el-date-picker-->
                  <!--                    v-if="!row.is_owner"-->
                  <!--                    v-model="row.expires_at"-->
                  <!--                    type="date"-->
                  <!--                    placeholder="到期日期"-->
                  <!--                    @change="editMember(row)"-->
                  <!--                  />-->
                  <el-button
                    v-if="!row.is_owner"
                    type="danger"
                    icon="el-icon-delete"
                    size="medium"
                    @click="deleteGroup(row.group_id, $index)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row style="margin-top:40px;" class="groupp-header">
          <el-col class="name-header" :span="7"><strong>{{ this.$route.params.projectName }}</strong> 的成员
            <el-badge :value="memberNum" type="primary" />
          </el-col>
          <el-col class="search-header" :span="4" :offset="12">
            <!--            todo 此处是前模糊搜索-->
            <el-input
              v-model="search"
              placeholder="请输入内容"
              suffix-icon="el-icon-search"
              @keyup.enter.native="groupMemberList"
            />
          </el-col>
          <el-col>
            <el-table
              v-loading="listLoading"
              :data="memberList"
              :show-header="false"
              highlight-current-row
            >
              <el-table-column>
                <template slot-scope="{ row }">
                  <el-row :gutter="10">
                    <el-col :span="3"><img class="avatar" :src="row.avatar_url" alt=""></el-col>
                    <el-col :span="10" style="padding-top:2px;">
                      <el-row :gutter="10"><strong>{{ row.name }}</strong></el-row>
                      <!--                      <el-row :gutter="10">加入时间 · </el-row>-->
                      <el-row :gutter="10">
                        {{ row.username }}
                      </el-row>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <template slot-scope="{ row, $index }">
                  <el-select
                    v-model="row.access_level"
                    :disabled="row.is_owner"
                    style="margin-top:15px;"
                    @change="editMember(row)"
                  >
                    <el-option
                      v-for="item in roleOptions"
                      :key="item.value"
                      :disabled="item.value === 50"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-date-picker
                    v-if="!row.is_owner"
                    v-model="row.expires_at"
                    type="date"
                    placeholder="到期日期"
                    @change="editMember(row)"
                  />
                  <el-button
                    v-if="!row.is_owner"
                    type="danger"
                    icon="el-icon-delete"
                    size="medium"
                    @click="deleteMember(row.id, $index)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </template>
    </el-col>
    <el-dialog
      title="选择导入的工程"
      :visible.sync="dialogImportVisable"
      @open="filterProject"
    >
      <el-form :model="importForm">
        <el-form-item>
          <el-select
            v-model="importForm.pid"
            filterable
            remote
            placeholder="搜索要导入的工程"
            :remote-method="filterProject"
            :loading="importLoading"
            style="width: 100%"
          >
            <el-option
              v-for="item in ProjectFilterOptions"
              :key="item.id"
              :label="item.name_with_namespace"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="margin-top:20px;">
        <el-button type="primary" @click="importProjectMember">确 定</el-button>
        <el-button @click="dialogImportVisable = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import { getData, postData } from '@/api/requestData'
    import GitNavigation from './components/GitNavigation'

    export default {
        filters: {},
        components: {
            GitNavigation
        },
        data() {
            return {
                importForm: {
                    pid: ''
                },
                dialogImportVisable: false,
                isOwner: false,
                filterLoading: false,
                memberFilterOptions: [], // 搜索用户的数据  options
                ProjectFilterOptions: [],
                activeName: 'user',
                search: '',
                memberNum: 0,
                shareGroupNum: 0, // 共享的群组的数量
                memberList: [], // 成员列表
                groupList: [], // 共享群组列表
                listLoading: true,
                importLoading: true, // 导入的工程加载图表
                memberForm: {
                    member: [],
                    role: '',
                    deadline: '',
                    pid: ''
                },
                groupForm: {
                    groupId: '',
                    role: '',
                    deadline: ''
                },
                roleOptions: [
                    { label: '访客', value: 10 },
                    { label: '报告者', value: 20 },
                    { label: '开发人员', value: 30 },
                    { label: '主程序员', value: 40 }
                    // { label: '拥有者', value: 50 }
                ],
                groupRoleOptions: [
                    { label: '访客', value: 10 },
                    { label: '报告者', value: 20 },
                    { label: '开发人员', value: 30 },
                    { label: '主程序员', value: 40 }
                ],
                groupOptions: [
                    { label: '请选择分享的群组', value: 0 }
                ]
            }
        },
        created() {
            this.memberForm.role = this.roleOptions[0].value
            this.memberForm.pid = this.$route.params.pid
            this.groupForm.role = this.roleOptions[0].value
            this.groupMemberList()
        },
        methods: {
            filterMember(memberName) {
                if (memberName !== '') {
                    this.filterLoading = true
                    setTimeout(() => {
                        getData('git/public/users/list', { 'name': memberName }).then((response) => {
                            this.memberFilterOptions = response.data
                        })
                        this.filterLoading = false
                    }, 100)
                } else {
                    this.memberFilterOptions = []
                }
            },
            filterProject(pname = '') {
                this.importLoading = true
                setTimeout(() => {
                    getData('git/public/project/list', { 'name': pname }).then((response) => {
                        this.ProjectFilterOptions = response.data
                    })
                    this.importLoading = false
                }, 100)
            },
            AddToProjectGroup() {
                this.memberForm.member = this.memberForm.member.join(',')
                postData('/git/add/project/member', this.memberForm).then((response) => {
                    this.memberForm.member = []
                    this.groupMemberList()
                    this.$message.success('添加成功')
                    window.location.reload()
                }).catch(() => {
                    this.$message.error('添加失败')
                })
            },
            GetGroup() {
                if (this.activeName === 'group') {
                    // 获取用户所在的用户组
                    getData('/git/public/all/groups').then((response) => {
                        this.groupOptions = response.data
                    })
                }
            },
            editMember(row) {
                const params = {
                    'gitUid': row.id,
                    'accessLevel': row.access_level,
                    'expireAt': row.expires_at
                }
                if (!row.expires_at) {
                    params['expireAt'] = ''
                }
                const pid = this.$route.params.pid
                getData('/git/change/member/role/expire/' + pid, params).then((response) => {
                    this.$message.success(response.message)
                }).catch(() => {

                })
            },
            groupMemberList() {
                const pid = this.$route.params.pid
                getData('/git/project/member/' + pid, { 'query': this.search }).then((response) => {
                    this.listLoading = true
                    this.memberList = response.data.memberList
                    this.memberNum = response.data.memberList.length
                    this.groupList = response.data.shareGroup
                    this.shareGroupNum = response.data.shareGroup.length
                    this.isOwner = response.data.isOwner
                    this.listLoading = false
                }).catch(() => {
                })
            },
            deleteMember(userId, index) {
                this.$confirm('确认删除?', '提示', {
                    confirmButtonType: 'warning',
                    cancelButtonType: 'text',
                    type: 'warning'
                }).then(() => {
                    // 确认处理逻辑
                    const pid = this.$route.params.pid
                    const url = '/git/public/del/project/member/' + pid + '/' + userId
                    getData(url).then((response) => {
                        this.memberList.splice(index, 1)
                        this.$message.success(response.message)
                    }).catch(() => {
                    })
                }).catch(() => {
                    this.$message.info('取消删除')
                })
            },
            deleteGroup(groupId, index) {
                this.$confirm('确认删除?', '提示', {
                    confirmButtonType: 'warning',
                    cancelButtonType: 'text',
                    type: 'warning'
                }).then(() => {
                    const pid = this.$route.params.pid
                    getData('/git/delete/share/group/' + pid + '/' + groupId).then((response) => {
                        this.shareGroupNum--
                        this.groupList.splice(index, 1)
                        this.$message.success(response.message)
                    }).catch(() => {
                    })
                }).catch(() => {
                    this.$message.info('删除失败')
                })
            },
            shareWithGroup() {
                const pid = this.$route.params.pid
                const params = {
                    'groupId': this.groupForm.groupId,
                    'accessLevel': this.groupForm.role,
                    'expiresAt': this.groupForm.deadline
                }
                postData('/git/public/share/with/group/' + pid, params).then((response) => {
                    this.$message.success(response.message)
                    window.location.reload()
                }).catch(() => {
                })
            },
            importProjectMember() {
                const importPid = this.importForm.pid
                // 导入成员
                const currentPid = this.$route.params.pid
                const params = {
                    'currentPid': currentPid,
                    'importPid': importPid
                }
                getData('/git/import/member/from/project', params).then((response) => {
                    this.$message.success(response.message)
                    setTimeout(() => {
                        window.location.reload()
                    }, 1000)
                }).catch(() => {

                })
                this.dialogImportVisable = false
            }
        }
    }
</script>

<style scoped>
  .el-tabs__nav.is-stretch {
    height: 50px !important;
  }

  .el-tabs__item {
    height: 50px;
    line-height: 50px;
  }

  .el-form-item {
    margin-bottom: 5px;
  }

  .el-form--label-top .el-form-item__label {
    padding-bottom: 0;
    /*margin-bottom: -5px;*/
  }

  .el-date-editor.el-input {
    margin-bottom: 15px;
  }

  .el-select-dropdown__item {
    /* height: 60px; */
  }
</style>
<style scoped>
  .name-header {
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
  }

  .avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }

  .member-avatar {
    width: 50px;
    height: 50px;
    margin-top: 5px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
  }

  .search-header {
    margin-top: 5px;
  }

  .groupp-header {
    background-color: #fafafa;
    /*background-color: #efe8e8;*/
  }

  .subtitle {
    display: block;
    margin-bottom: 10px;
    margin-top: -10px;
    font-size: smaller;
  }
</style>

